<template>
    <div align="center" style="height: 100vh;position: relative;">
      <div v-show="isShowImage" >
        <div style="position: absolute;right: 1.25rem;top: 0.625rem;z-index: 9999;">
          <Button type="primary" @click="rotate">旋转</Button>
        </div>
        <div :style="{transform: 'rotate('+ deg +'deg)'}" ref="rotate">
          <img :src="images" style="width: 80%; margin: 2%;"/>
        </div>
      </div>
      <template v-if="!isShowImage">
        <iframe class="prism-player" :src="'./static/pdf/web/viewer.html?file=' + pdfHref + '#'+ fileName" width="100%" height="100%" ></iframe>
      </template>
      <Spin size="large" fix v-if="loadingSpin"></Spin>
    </div>
</template>

<script>
  export default {
    name: "preview",
    components: {
    },
    data() {
      return {
        loadingSpin: false,
        fileUrl: this.CONFIG.file_url,
        file: "",
        fileName: "",
        isShowImage: false,
        images: "",
        pdfHref: "",
        deg: 0

      }
    },
    created: function() {
      this.file = this.$route.query.file
      this.fileName = this.$route.query.fileName
      this.loadingSpin = true
      this.getFilePage()
    },
    methods: {
      rotate () {
        this.deg += 90
        if (this.deg >= 360) {
          this.deg = 0
        }
        console.log("this.deg-", this.deg)
      },
      getFilePage() {
        var reg2 = /^(\s|\S)+(JPEG|jpeg|jpg|png|JPG|PNG)+$/
        var pdfReg = /^(\s|\S)+(xls|xlsx|doc|docx|ppt|pptx)+$/
        if (reg2.test(this.fileName)) {
          this.isShowImage = true
          var that = this;
          var url = this.fileUrl + '/get/' + this.file
          this.axios.get(url, {
            responseType: "arraybuffer",
          }).then(function(response) {
            return 'data:image/png;base64,' + btoa(
              new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
            );
          }).then(function(data) {
            that.images = data;
            that.loadingSpin = false
          }).catch(function(error) {
            that.showErrorInfo(error)
          });
        } else if (pdfReg.test(this.fileName)) {
          this.isShowImage = false
          var url = this.fileUrl + '/preview/' + this.file
          this.getPdf(url)
        } else if (this.fileName.indexOf('.pdf') > -1) {
          var url = this.fileUrl + '/get/' + this.file
          this.getPdf(url)
        }
      },
      getPdf(url) {
        this.loadingSpin = true
        var that = this;
        this.axios.get(url, {
          responseType: 'blob'
        }).then(function(response) {
          that.pdfHref = that.getObjectURL(response.data);
          that.loadingSpin = false
        }).catch(function(error) {
          that.showErrorInfo(error)
          that.loadingSpin = false
        });
      },
      /**
       * 显示错误信息
       * @param {Object} error
       */
      showErrorInfo(error){
        if (error && error.response) {
          if (error.response.status == 403) { //forbiden
            that.$Notice.error({
              title: '请求拒绝',
              desc: '您没有当前操作权限',
            });
          } else if (error.response.status == 401) { //forbiden
            that.$Notice.error({
              title: '用户未登陆',
              desc: '请重新登陆该系统',
            });
          } else if (error.response.status == 400) { //forbiden
            that.$Notice.error({
              title: '访问数据不存在',
              desc: '请联系管理员进行处理',
            });
          } else if (error.response.status == 406) { //forbiden
            that.$Notice.error({
              title: '访问数据不存在',
              desc: error.response.data ? error.response.data:error.response,
              duration: 5,
            });
          } else {
            that.$Notice.error({
              title: '网络异常',
              desc: error.response.data ? error.response.data:error.response,
            });
          }
        } else if (error == 400) {
          that.$Notice.warning({
            title: '访问数据不存在',
            desc: '请联系管理员进行处理',
          });
        } else if (error == 403) { //forbiden
          that.$Notice.error({
            title: '请求拒绝',
            desc: '您没有当前操作权限',
          });
        } else if (error == 404) {
          that.$Notice.error({
            title: '访问数据有误',
            desc: '请联系管理员进行处理',
          });
        } else if (error == 401) { //forbiden
          that.$Notice.error({
            title: '用户未登陆',
            desc: '请重新登陆该系统',
          });
        } else {
          that.$Notice.error({
            title: '网络异常',
            desc: error.response.data ? error.response.data:error.data,
          });
        }
      },
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            try {
              url = window.webkitURL.createObjectURL(file);
            } catch (error) {

            }
        } else if (window.URL != undefined) { // mozilla(firefox)
          try {
            url = window.URL.createObjectURL(file);
          } catch (error) {

          }
        }
        return url;
      },
    }
  }
</script>

<style>
  .pdf-container {
    width: 750px;
  }

  .canvas-container {
    border: 1px dashed black;
    position: relative;
  }
</style>
